<template>
    <div id="myLiveRoom">
        <header>
            <div class="title">
                <img class='back' src="../../image/icon_retern0.png" alt="" width="33" height="33" @click="goBack()">
                <img class='set' src="../../image/set_up.png" alt="" width="24" height="24" @click="goSet">
            </div>
            <div class="bigImg" :style="{backgroundImage: 'url('+ (liveObj.live_pic?liveObj.live_pic:imgUrl) +')'}">
                <div>
                    <img :src="liveObj.live_pic?liveObj.live_pic:imgUrl" alt="" width="59" height="59">
                </div>
                <p>{{liveObj.username?liveObj.username:"用户"+userid}}</p>
            </div>
        </header>
        <div class='createBtn'>
            <router-link :to='{name:"createLiveCourse"}' class='createSingle' v-if='status=="add"'>创建房间</router-link>
            <router-link :to='{name:"createLiveCourse"}' class='createSingle' v-if='status=="edit"'>编辑房间</router-link>
            <!-- <router-link :to='{name:"beginLive"}' class='createSingle'>开始直播</router-link> -->
            <a @click='goBeginLive' class='createSingle'>开始直播</a>
        </div>
        <div class="nav">
            <div class="active" @click="getCourseListByUid(sentPage,'click')">
                <a class="">
                    <b>课程</b>
                </a>
            </div>
            <div @click="getLiveRoomByUid()">
                <a class="">
                    <b>介绍</b>
                </a>
            </div>
        </div>
        <div class="border-5"></div>
        <div class="swiper-container swipe" id="outSwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-if='showCourse'>
                    <Loadmore
                        :bottom-method="loadBottom1"
                        :bottom-all-loaded="allLoaded"
                        ref="loadmore1"
                        :autoFill="false"
                    >
                        <ul class="single">
                            <li v-for="(item,index) in list" :key='index'>
                            <a>
                                <img :src="item.course_pic" width="112" height="77" />
                                <div>
                                <h3>{{item.course_name}}</h3>
                                <div>
                                    主讲老师: {{item.username}}
                                </div>
                                <div>
                                    开课时间: {{item.starttime}}
                                </div>
                                <p>
                                    <i>
                                    {{item.iffree=='free'?"免费":item.charge}}
                                    <!-- <span>{{item.charge}}元</span> -->
                                    </i>
                                    <!-- <b>2306人想学</b> -->
                                </p>
                                </div>
                            </a>
                            </li>
                        </ul>
                    </Loadmore>
                </div>
                <!-- <div class="swiper-slide">
                    <Loadmore
                        :bottom-method="loadBottom2"
                        :bottom-all-loaded="allLoaded"
                        ref="loadmore2"
                        :autoFill="false"
                    >
                    <ul class="single">
                        <li v-for="(item,index) in list" :key='index'>
                        <a>
                            <img :src="item.course_pic" width="112" height="77" />
                            <div>
                            <h3>{{item.course_name}}</h3>
                            <div>
                                主讲老师: {{item.username}}
                            </div>
                            <div>
                                开课时间: {{item.starttime}}
                            </div>
                            <p>
                                <i>
                                {{item.iffree=='free'?"免费":item.charge*item.discount}}
                                <span>{{item.charge}}元</span>
                                </i>
                                <b>2306人想学</b>
                            </p>
                            </div>
                        </a>
                        </li>
                    </ul>
                    </Loadmore>
                </div> -->
                <div class="swiper-slide" v-if='!showCourse'>
                    <div class='introduce'>
                        <h3>直播间简介:</h3>
                        <p>{{liveObj.content || '暂无简介哦'}}</p>
                        <h3>创建日期:</h3>
                        <p>{{liveObj.time || '暂无'}}</p>
                        <!-- <h3>认证说明:</h3>
                        <p>开业牙医直播间开业牙医直播间开业牙医直播间开业牙医直播间开业牙医直播间开业牙医直播间开业牙医直播间开业牙医直播间开业牙医直播间开业牙医直播间开业牙医直播间开业牙医直播间</p> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 蒙层 -->
        <div class="mc" v-show='showmask' @click='showmask = false'>
        </div>
        <div class='mask' v-show='showmask'>
            <h2>手机端暂不支持</h2>
            <span>url:</span>
            <h3>{{live_url}}</h3>
            <span>流密钥:</span>
            <h3>{{liveObj.liu_name}}</h3>
        </div>
    </div>
</template>
<script>
    import {Loadmore} from 'mint-ui';
    export default {
        data() {
            return {
                status: '',  //add  | edit
                showCourse: true,  //选项卡切换
                live_url: '',  //直播推送地址url
                showmask: false,  //是否显示直播url和流密钥
                list: [],
                userid: "",
                imgUrl: require("../../image/live_default.jpg"),//默认头像
                sentPage:{
                  page : 1,//分页累加
                },//接口入参
                totalNum: 0, //总数据条数
                allLoaded: false,         //分页数据是否已经加载完毕
                course_num: 1,  //课程类型 1是单节课 2是系列课
                liveObj: {},  //直播间对象   
            }
        },
        components: {
            Loadmore,
        },
        methods: {
            goBack() {
                // this.$router.back();
                this.$router.push({path:'/my'});
            },
            goSet() {
                this.$router.push({path:'/liveRoomSet'});
            },
            //开始直播
            goBeginLive() {
                // // this.live_url = this.$api.live_url;
                this.$api.get(this.$api.baseURLSchool,"select_cid/live_room/"+this.userid,{},r => {
                    // console.log(r);
                    if(r.data.ret == 1) {
                        this.$router.push({name: 'beginLive',query: {bcid: r.data.info.id}});
                    } else {
                        this.$utils._toast('请先创建房间');
                    }
                },err => {
                    console.log(err);
                })
            },
            //根据用户id获取用户信息
            getUserData() {
                this.userid = localStorage.getItem("loginMobile");
                this.$api.get(this.$api.baseURLSchool,"select_cid/live_room/"+this.userid,{},r => {
                    // console.log(r);
                    if(r.data.ret == 1) {
                        this.status = 'edit';
                        this.liveObj = r.data.info;
                    } else {
                        this.status = 'add';
                    }
                },err => {
                    console.log(err);
                })
                
            },
            //根据用户id获取课程列表
            getCourseListByUid(params,click) {  // type: 1是单节课 2是多节课  暂时不分单多节课了
                this.showCourse = true;
                if(click) {
                    this.list = [];
                    this.sentPage.page = 1;
                    this.allLoaded = false;
                }
                this.$api.post(this.$api.baseURLSchool,"selecttype_view/view_course_user/0?tele="+this.userid,params,r => {
                    // console.log(r);
                    this.totalNum = r.data.records;
                    if(this.sentPage.page==1) {
                        this.list = r.data.rows;
                    }else {
                        this.list = this.list.concat(r.data.rows);
                    }
                    if(r.data.rows.length == 0&&this.sentPage.page>1) {
                        this.$utils._toast("暂无更多数据");
                    }
                    if(this.totalNum == this.list.length) {
                        this.allLoaded = true;
                    }
                },err => {
                    console.log(err);
                })
            },
            //根据用户id获取直播间信息
            getLiveRoomByUid() {
                this.showCourse = false;
                this.$api.get(this.$api.baseURLSchool,"select_cid/live_room/"+this.userid,{},r => {
                    console.log(r);
                    if(r.data.ret == 1) {
                        this.liveObj = r.data.info;
                    }
                },err => {
                    console.log(err);
                })
            },
            //上拉加载下一页
            loadBottom1() {
                (this.sentPage.page)++;
                setTimeout(() => {
                    this.getCourseListByUid(1,this.sentPage);
                }, 20);
                if(this.totalNum == this.list.length) {
                    this.allLoaded = true;
                }
                this.$refs.loadmore1.onBottomLoaded();
            },
            loadBottom2() {
                (this.sentPage.page)++;
                setTimeout(() => {
                    this.getCourseListByUid(2,this.sentPage);
                }, 20);
                if(this.totalNum == this.list.length) {
                    this.allLoaded = true;
                }
                this.$refs.loadmore2.onBottomLoaded();
            },
        },
        created() {
            this.getUserData();
            this.getCourseListByUid(1,this.sentPage);
        },
        mounted() {
            // var mySwiper = new Swiper ('#outSwiper', {
            //     onSlideChangeStart: function(swiper){
            //         var index = swiper.activeIndex;
            //         $('.nav div').removeClass();
            //         $('.nav div').eq(index).addClass("active");
            //     }
            // });
            // $('.nav div').click(function(){
            //     mySwiper.slideTo($(this).index());
            //     $(this).addClass('active').siblings().removeClass();
            // });
            $('.nav div').click(function(){
                $(this).addClass('active').siblings().removeClass();
            });
        }
    }
</script>
<style lang="scss" scoped>
    .mc {
        width: 100%;
        height: 100%;
        position: fixed;
        left:0;
        top: 0;
        background: #000;
        opacity: .6;
        z-index: 2;
    }
    .mask {
        position: fixed;
        width: 60%;
        height: auto;
        background: #fff;
        padding:15px;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index: 2;
        border-radius: 10px;
        h3 {
            padding-top: 5px;
            padding-bottom: 10px;
        }
    }
    
</style>
